<template>
<div>
    <div class="top">
     漫画首页
    </div>
    <div class="search"> 
    <van-search
    @click="toSearch"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
/>
</div>
    <el-carousel :interval="4000" type="card" height="350px">
      
      <el-carousel-item v-for="(item,index) in imgList" :key="index">
        <router-link :to="item.link" @click.native="selectList(item)">
       <div class="abc">
        <img :src="item.cover"  style="width: 300px; height: 350px">
       </div>
        </router-link>
    </el-carousel-item>
  </el-carousel>
  <homeList :tit="topBox" :data="topBoxList"></homeList>
  <homeList :tit="bottomBox" :data="bottomList"></homeList>
    <div class="sm">
      声明 :
      <br />数据均来源于网络，并不参与存储、上传、创作，版权争议与本站无关。
      仅学习交流使用，请勿用于商业（非法）用途！否则，一切后果请自行承担！
    </div>
 <div>
 <List></List>
 </div>
</div>
</template>

<script>
import { homeApi } from '../api/data'
import { mapMutations } from 'vuex';
import homeList from './HomeList/Homelist.vue'
import Search from './Moudule/Search.vue';
import List from './List/list.vue';
export default {
  name:'Main',
  components:{
    homeList,
    Search,
    List
},
  data(){
   return{
    imgList:[],
    topBoxList:[],
    bottomList: [],
     topBox: {
        title: '人氣推薦',
      },
      bottomBox: {
        title: '編輯推薦',
      },
   };
  },
  methods: {
   ...mapMutations(['setMhData']),
   toSearch()
   {
     this.$router.push({
      path:"/search"
     })
   },
   selectList(item)
   {
    this.setMhData(item)
   },
   async getList()
    {
      let origin = await homeApi()
      let {code} = origin.data
      console.log(origin)
      let list = origin.data.data || []
      if(code === 0)
      {
        list = list.map((item) => {
          return{
            ...item,link:`/about?url=${item.comicId}`,
          }       
        })
      console.log(list)
      this.imgList = list.slice(13, 20)
      this.topBoxList = list.slice(0,6)
      this.bottomList = list.slice(7,13)
      // sessionStorage.setItem('homeList', JSON.stringify(list))
      }
    },
   async getabc()
    {
     let abc = await homeApi()
     console.log(abc)
    }
  },
  created()
  {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
  .abc
  {
    width: 300px;
    height: 300px;
    background-color: pink;
    margin: 0 auto;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.top
{
    width: 100%;
    height:40px;
    line-height: 40px;
    background-color: pink;
    text-align: center;
    margin: 0 auto;
}
.sm {
  text-align: left;
  padding: 0.1rem;
  color: red;
}
.topBoxlist
{
  width: 100%;
  height: 400px;
  background-color: pink;
}
.bottomList
{
  width: 100%;
  height: 400px;
  background-color: cadetblue;
}
</style>
